<template>
  <div class="llt-header-2 w100" style="background: var(--navColorBg)">
    <div class="aic jcb top w100">
      <div
        @click.stop="routerPush({ path: '/' })"
        class="logoBoxindex2 aic jcc"
      >
        <img src="../../assets/svg/login-box-bg.svg" alt="" />
        <div style="color: var(--navColorFont)">
          {{projectName }}
        </div>
      </div>
      <!-- 二级导航左边 start -->
      <div class="aic">
        <div class="aic">
          <searchBox />
          <messageBox />
          <el-tooltip
            class="item"
            effect="dark"
            :content="!isFullscreen ? '全屏' : '退出全屏'"
            placement="bottom"
          >
            <el-icon
              style="color: var(--navColorFont)"
              @click="toggle"
              v-if="!isFullscreen"
              class="llt-icon-size"
              ><full-screen
            /></el-icon>

            <el-icon
              style="color: var(--navColorFont)"
              @click="toggle"
              v-else
              class="llt-icon-size"
              ><rank
            /></el-icon>
          </el-tooltip>
        </div>
        <userBox />
        <editBox />
      </div>
      <!-- 二级导航左边 end -->
    </div>
    <!-- 上下分割线 -->
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  watch,
  watchEffect,
  onMounted,
  computed,
} from "vue";
import { useFullscreen } from "@vueuse/core";
import { routerPush } from '/@ts/hooks/route'
import messageBox from "/@/layouts/components/messageBox.vue";
import searchBox from "/@/layouts/components/searchBox.vue";
import userBox from "/@/layouts/components/userBox.vue";
import editBox from "/@/layouts/components/editBox.vue";
import type { AppRouteModule } from "/@ts/router/types";
import { useRouter } from "vue-router";
import { useIndexStore } from "/@ts/store";

const { isFullscreen, toggle } = useFullscreen();
const router = useRouter();
const internalInstance = getCurrentInstance(); //获取当前实例
const globalProperties = internalInstance?.appContext.config.globalProperties;

const props = defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
const store = useIndexStore();
const projectName = computed(() => store.getProjectName);
const handleSelect = () => {};
</script>

<style lang="scss">
.logoBoxindex2 {
  height: 54px;
  > img {
    width: 45px;
  }
  > div {
    font-size: 22px;
    font-weight: bold;
    margin-left: 15px;
  }
}
.header-setting-drawer {
  border-top: 1px solid #e6e6e6;
  padding: 10px 30px;
}

.header-message-tabs .el-tabs__active-bar {
  width: 44px !important;
}

.llt-header-2 {
  padding: 0 100px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  .top {
    border-top: solid 1px rgba(0, 0, 0, 0.1); //#e6e6e6
    box-sizing: border-box;
    height: 54px;
  }
}

.llt-badge {
  position: absolute;
  top: 10%;
  right: 11%;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: red;
}
.header-message-tabs {
  padding-top: 0;
  width: 400px;

  .item {
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 2rem;
  }
  .time {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 2rem;
  }
}
.header-theme-color-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  color: #fff;
  margin-left: 10px;
}
#el-popper-3198 {
  z-index: 1000012 !important;
}
</style>
